<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./index.css" />
  </head>

  <body>
    <div class="wrap">
      <div class="title">学生系统</div>
      <div id="form">
        <p>姓名<input id="username" type="text" value="张三123" /></p>
        <p>年龄<input id="age" type="text" value="21" /></p>
        <p>
          性别
          <select id="gender">
            <option>男</option>
            <option>女</option>
            <option>你猜</option>
          </select>
        </p>
        <p>
          <input type="button" value="添加" id="addBtn" />
          <input type="button" value="排序" id="sortBtn" />
        </p>
        <p>
          性别
          <select id="sexsort">
            <option value="default">默认</option>
            <option value="男">男</option>
            <option value="女">女</option>
          </select>
          排序
          <select id="agesort">
            <option value="default">默认</option>
            <option value="low">年龄由大到小</option>
            <option value="up">由小到大</option>
          </select>
        </p>
      </div>
      <table id="table">
        <thead>
          <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>

    <script>
      //  第一步 操作数据 ；  第二步 渲染视图 ；
      var usernameEle = document.querySelector("#username");
      var ageEle = document.querySelector("#age");
      var genderEle = document.querySelector("#gender");

      var addBtnEle = document.querySelector("#addBtn");
      var tbodyEle = document.querySelector("tbody");

      var sortBtn = document.querySelector("#sortBtn");

      var users = [];

      addBtnEle.onclick = function () {
        var username = usernameEle.value;
        var age = ageEle.value;
        var gender = genderEle.value;
        users.push({ username: username, age: age, gender: gender });
        
        renderDom(users);
      };

      sortBtn.onclick = function () {
        // 数据排序
        users.sort(function (a, b) {
          return a.age - b.age;
        });

        renderDom(users);
      };

      function renderDom(arr) {
        tbodyEle.innerHTML = ""; // 把 tbody里原本的内容清空
        arr.forEach(function (user, key) {
          var trEle = document.createElement("tr");
          trEle.innerHTML =
            "<td>" +
            user.username +
            "</td><td>" +
            user.age +
            "</td><td>" +
            user.gender +
            "</td><td class='del'>删除</td>";

          // 获取删除 按钮 ，点击删除的时候 先删除数据，在渲染视图；
          var delBtn = trEle.querySelector(".del");
          delBtn.onclick = function () {
            // console.log("点击了删除按钮",key);
            arr.splice(key, 1);
            users.splice(key, 1);
            console.log(arr);
            renderDom(arr);
          };

          tbodyEle.appendChild(trEle);
        });
      }

      //筛选功能
      //获取所需元素
      var sexsort = document.querySelector("#sexsort");
      var agesort = document.querySelector("#agesort");

      //封装一个筛选方法
      function sortEvent(){
        //判断年龄筛选条件
        let arr = deepCopy(users);
        switch (agesort.value) {
            case "low":
            arr.sort( (a, b) => b.age - a.age );
            break;
            case "up":
            arr.sort( (a, b) => a.age - b.age );
            break;
            case "default":
            arr = users;
            break;
        }
        //判断性别筛选条件
        if (sexsort.value !== "default") {
          var nows = arr.filter( item => item.gender == sexsort.value );
          renderDom(nows);
        }else{
            renderDom(arr);
        }
      }
      //绑定对应点击事件
      sexsort.onclick = function () {
        sortEvent();
      };
      agesort.onclick = function () {
        sortEvent();
      };
      //递归深拷贝
      function deepCopy(obj1) {
            var obj2 = Array.isArray(obj1)?[]:{};
            for(var key in obj1){
                if(typeof obj1[key] === "object"){
                    obj2[key] = deepCopy(obj1[key]);
                }else{
                    obj2[key] = obj1[key];
                }
            }
            return obj2;
        }
    </script>
  </body>
</html>
